<template>
  <div class="base-count">
    <button @click="handleSub">-</button>
    <span>{{ count }}</span>
    <button @click="handleAdd">+</button>
  </div>
</template>

<script>
export default {
  // 2.props传过来的数据(外部的数据) --> 单向数据流: 父组件的props更新,会单向向下流动,影响到子组件
  props: {
    count: {
      type: Number,
      default: 0
    }
  },
  methods: {
    handleAdd() {
      // 子传父 this.$emit(事件名, 参数)
      this.$emit('changeCount', this.count + 1)
    },
    handleSub() {
      this.$emit('changeCount', this.count - 1)
    }
  },
  // data必须是个函数 -> 保证每个组件实例,维护独立的数据对象
  // 1.data是自己的数据,随便改(谁的数据谁负责)
  data() {
    return {
      // count: 100
    }
  }
}
</script>

<style scoped>
.base-count {
  margin: 20px;
}
</style>